import React, { Component, Fragment } from 'react';
import { Spin, Row, Col, Card, Table,} from 'antd';
import { connect } from 'dva';
import styles from './record.less';
import {abs} from '@/utils/utils';

class RefundRecord extends Component {
    constructor() {
        super();
        this.state={
            dataSource: [],
        };       
    }

    componentWillMount(){
        this.getMoneyWent();
        window.Isoption = false;
    }
      componentDidMount() {
        window.Isoption = true;
      }

    getMoneyWent =()=> {
        const { dispatch } = this.props;
        dispatch({
            type: 'recordList/GetMoneyWent',
            payload: {
                orderNo: this.props.match.params.id
            },
            callBack: {
                success: res=> {
                    this.setState({
                        dataSource: res.Data?res.Data:[]
                    })
                }
            }
        })
    }

    render() {
        let sum= 0;
        const {dataSource} = this.state;
        dataSource.forEach(ele => {
            sum+= ele.PayTotal;
        })
        const {loading} = this.props;
        return (
            <Fragment>
                <Spin spinning={loading}>
                    <Card bordered={false} className={styles.Record}>
                        <Row className='RecordHead'>
                            <Col>
                                退款/返现总额：￥<b>{abs(sum,2)}</b>
                                <span>订单号：<em>E{this.props.match.params.id}</em></span>
                            </Col>
                        </Row>
                        <Table
                            dataSource={dataSource}
                            columns={[{
                                        title: '退款流水号',
                                        dataIndex: 'ExpensesNumber',
                                    },
                                    {
                                        title: '申请时间',
                                        dataIndex: 'CreateTime',
                                        width: '23%',
                                    },
                                    {
                                        title: '退款方式',
                                        dataIndex: 'TransferType',
                                        width: '23%',
                                    },
                                    {
                                        title: '金额',
                                        align:'right',
                                        render: (text, vel) => (
                                            <span>￥{abs(vel.PayTotal, 2)}</span>
                                        )
                                    },
                                    {
                                        title: '状态',
                                        width: '14%',
                                        align:'right',
                                        render: (text, vel)=> {
                                            if(vel.Statu ===0) {
                                                return (
                                                    <span>待处理</span>
                                                )
                                            }
                                            if(vel.Statu ===1) {
                                                return (
                                                    <span>已处理</span>
                                                )
                                            }  
                                            if(vel.Statu ===2) {
                                                return (
                                                    <span>发放异常</span>
                                                )
                                            }      
                                        }
                                    }  
                            ]}
                            className="RecordList"
                            pagination={false}
                        />
                    </Card>

                </Spin>

            </Fragment>
        );
    }
}


export default connect(({ recordList,global, loading }) => ({
    recordList,
    oemInfo: global.oemInfo,
    loading: loading.effects['recordList/GetMoneyWent'],
  }))(RefundRecord)